<template>
<div>
  <div class="distribution"  v-for="item in waitOrder" :key="item.id">
    <div class="disone">
        <span style="color:orange">#{{item.id}}</span>
        <div class="smradius">我</div>
        <span>-5千米-</span>
        <div class="smradius" style="background:#88c4f6">取</div>
        <span>-3千米-</span>
        <div class="smradius" style="background:#6cc87b">送</div>
        <span style="margin-left:1rem;font-size:0.38rem;color:#9a3928">￥25</span>
    </div>
    <div class="address">
        <div>
            <span style="position:absolute; color:#2286e8;">取：</span>
            <div class="addressqu">
              <span v-for="god in item.goods" :key="god.name" style="padding:0.05rem;">{{god.name}}</span><br><br>
              <span>{{item.take_add}}</span>
            </div>
        </div>
        <div class="addsend">
            <span style="color:#5fb377">送：</span>
            <span>{{item.address}}</span>
        </div>
    </div>
    <div class="formtime">
        <span>下单：05-31 11:54</span>
        <span>配送：2018-05-31 尽快送达</span>
    </div>
    <div class="mybtn" v-if="hidden_btn">
        <el-button type="danger" style="width:50%;height:1rem;font-size:0.4rem">转单</el-button>
        <el-button type="success" style="width:50%;height:1rem;font-size:0.4rem" v-bind:num="item.order_num" v-on:click="pubstock(item.order_num)">{{btntext}}</el-button>
    </div>
  </div>
</div>
</template>

<script>
export default {
  props: [
    'btntext',
    'hidden_btn',
    'waitOrder'
  ],
  data () {
    return {
    }
  },
  methods: {
    // 确认取货、配送成功、操作
    pubstock (num) {
      let btntext = this.btntext
      if (btntext === '开始配送') {
        this.$axios.get('/api.php/Index/index?action=confirmPickup&order_num=' + num)
          .then(res => {
            this.openmesg(res.data.message)
          })
      } else if (btntext === '配送成功') {
        this.$axios.get('/api.php/Index/index?action=deliverSuccess&order_num=' + num)
          .then(res => {
            this.openmesg(res.data.message)
          })
      }
    },
    /** 消息提示 */
    openmesg (msg) {
      this.$message({
        message: msg,
        type: 'warning'
      })
    }
  },
  created: function () {

  }
}
</script>

<style lang="stylus" scoped>
  .distribution
    width 95%
    height auto
    display flex
    margin 0 auto
    flex-direction column
    padding-bottom 0.5rem
    border-bottom 1px solid #cccccc
   .disone
     display flex
     height 1rem
     align-items center
     width 100%
     border-bottom 1px solid #cccccc
    .disone>span
      font-size 0.3rem
      padding-left 0.1rem
    .smradius
      width .4rem
      height .4rem
      padding 0.1rem
      border-radius 50%
      background #ff915a
      color #fff
      text-align center
      line-height .4rem
      font-size 0.3rem
      font-weight bold
      margin-left 0.2rem
    .address
      display flex
      height 2rem
      width 100%
      flex-direction column
      justify-content space-around
      margin-top 0.4rem
      font-size 0.3rem
     .addressqu
      margin -14px 0 0 40px
     .addsend>span
      line-height 0.5rem
     .addressqu>span
        padding .1rem 0
     .formtime
       width 100%
       height 0.6rem
       line-height 0.6rem
       display flex
       justify-content space-around
       color #000000
       font-size 0.2rem
      .formtime>span
        border .02rem solid  #4fae52
        border-radius .3rem
        padding 0 .2rem
.mybtn
  margin-top 0.5rem
  display flex
  justify-content space-around
</style>
